<template>
  <div class="edit">
    <div class="editHead">
      <el-form :rules="formData" :model="formData" label-position="top">
        <el-form-item :label="$t('configLazyLoad.dicConfig.dicName')" prop="name" v-if="labelView.name">
          <el-input v-model.trim="formData.name" :maxlength="25" size="mini" :disabled="isPleased"></el-input>
        </el-form-item>
        <el-form-item :label="labelView.level">
          <el-radio-group v-model.trim="formData.cascade" size="mini" @change="radioChange" :disabled="isPleased">
            <el-radio-button :label="'1'">{{$t('configLazyLoad.dicConfig.grade1')}}</el-radio-button>
            <el-radio-button :label="'2'">{{$t('configLazyLoad.dicConfig.grade2')}}</el-radio-button>
            <el-radio-button :label="'3'">{{$t('configLazyLoad.dicConfig.grade3')}}</el-radio-button>
            <el-radio-button :label="'4'">{{$t('configLazyLoad.dicConfig.grade4')}}</el-radio-button>
            <el-radio-button :label="'5'">{{$t('configLazyLoad.dicConfig.grade5')}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div id="dic-level-root" class="dic_config_warp">
      <p v-if="isPleased" class="isPleaseTips">{{$t('channelsettings.sato1')}}</p>
      <p>{{labelView.content}}</p>
      <el-form ref="ruleForm" :model="model" :rules="rules">
          <ul class="next">
            <el-form-item prop="firstHeader">
              <el-input class="level-input" v-model.trim="model.firstHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip1')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="firstOption.length === 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="firstOption" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" :class="{active: index === firstIndex && model.name !== '', noName: index === firstIndex && model.name === '', isdisabled: !model.checked}" v-for="(model, index) in firstOption">
                  <div class="bold" @click.stop="toggle($event, index, 1, model)">
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled"></el-input>
                    </div>
                    <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === firstIndex && !closeSession">
                      <el-checkbox-button v-model="model.checked" size="mini" @change="changeState($event, index, 1)" :label="model.checked ? $t('sms.stop'):$t('sms.reuse')"></el-checkbox-button>
                    </div>
                    <div class="icon-wapper">
                      <i class="iconfont icon-yitingyong stopIcon" v-show="index !== firstIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== firstIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== firstIndex && model.name !== ''"></i>
                      <!-- <p class="iconFontDel 123" @click.stop="delChild(index, 1)" v-show="!model.isdisabled">{{$t('public.delete')}}</p> -->
                      <el-popover
                        placement="top"
                        width="160"
                        ref="popover"
                        v-show="!model.isdisabled">
                        <p>{{$t('customer.deleteCustomerMessageOne')}}</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="allClose">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click.stop="delChild(index, 1)">{{$t('public.confirm')}}</el-button>
                        </div>
                        <p slot="reference" class="iconFontDel 2333" >{{$t('public.delete')}}</p>
                      </el-popover>
                      <p class="iconFontDel" v-show="model.isdisabled">{{$t('public.delete')}}</p>
                    </div>
                  </div>
                </div>
                </li>
              </draggable>
              <li class="add" @click="addChild(1)"><el-button class="addItem" icon="el-icon-plus" type="text">{{labelView.addItem}}</el-button></li>
            </div>
          </ul>
          <ul class="next" v-if="formData.cascade >= 2">
            <el-form-item prop="secoundHeader">
              <el-input class="level-input" v-model.trim="model.secoundHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip2')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="secoundOption.length === 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="secoundOption" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" :class="{active: index === secoundIndex && model.name !== '', noName: index === secoundIndex && model.name === '', isdisabled: !model.checked}" v-for="(model, index) in secoundOption">
                  <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 2)">
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled"></el-input>
                    </div>
                    <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === secoundIndex && !closeSession">
                      <el-checkbox-button v-model="model.checked" :disabled="model.isdisabled" size="mini" @change="changeState($event, index, 2)" :label="model.checked ? $t('sms.stop'):$t('sms.reuse')"></el-checkbox-button>
                    </div>
                    <div class="icon-wapper" v-if="!isPleased">
                      <i class="iconfont icon-yitingyong stopIcon" v-show="index !== secoundIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== secoundIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== secoundIndex && model.name !== ''"></i>
                      <!-- <p class="iconFontDel 124" @click.stop="delChild(index, 2)" v-show="!model.isdisabled">{{$t('public.delete')}}</p> -->
                      <el-popover
                        placement="top"
                        width="160"
                        ref="popover"
                        v-show="!model.isdisabled">
                        <p>{{$t('customer.deleteCustomerMessageOne')}}</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="allClose">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click.stop="delChild(index, 2)">{{$t('public.confirm')}}</el-button>
                        </div>
                        <p slot="reference" class="iconFontDel 123" >{{$t('public.delete')}}</p>
                      </el-popover>
                      <p class="iconFontDel" v-show="model.isdisabled">{{$t('public.delete')}}</p>
                    </div>
                  </div>
                </div>
                </li>
              </draggable>
              <li class="add" @click="addChild(2)" v-if="!isPleased"><el-button class="addItem" icon="el-icon-plus" type="text">{{labelView.addItem}}</el-button></li>
            </div>
          </ul>
          <ul class="next" v-if="formData.cascade >= 3">
            <el-form-item prop="thirdHeader">
              <el-input class="level-input" v-model.trim="model.thirdHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip3')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="thirdOption.length === 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="thirdOption" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" :class="{active: index === thirdIndex && model.name !== '', noName: index === thirdIndex && model.name === '', isdisabled: !model.checked}" v-for="(model, index) in thirdOption">
                <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 3)">
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled"></el-input>
                    </div>
                    <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === thirdIndex && !closeSession">
                      <el-checkbox-button v-model="model.checked" :disabled="model.isdisabled" size="mini"  @change="changeState($event, index, 3)" :label="model.checked ? $t('sms.stop'):$t('sms.reuse')"></el-checkbox-button>
                    </div>
                    <div class="icon-wapper">
                      <i class="iconfont icon-yitingyong stopIcon" v-show="index !== thirdIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== thirdIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== thirdIndex && model.name !== ''"></i>
                      <!-- <p class="iconFontDel 125" @click.stop="delChild(index, 3)" v-show="!model.isdisabled">{{$t('public.delete')}}</p> -->
                      <el-popover
                        placement="top"
                        width="160"
                        ref="popover"
                        v-show="!model.isdisabled">
                        <p>{{$t('customer.deleteCustomerMessageOne')}}</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="allClose">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click.stop="delChild(index, 3)">{{$t('public.confirm')}}</el-button>
                        </div>
                        <p slot="reference" class="iconFontDel 125" >{{$t('public.delete')}}</p>
                      </el-popover>
                      <p class="iconFontDel" v-show="model.isdisabled">{{$t('public.delete')}}</p>
                    </div>
                  </div>
                </div>
              </li>
              </draggable>
              <li class="add" @click="addChild(3)"><el-button class="addItem" icon="el-icon-plus" type="text">{{labelView.addItem}}</el-button></li>
            </div>
          </ul>
          <ul class="next" v-if="formData.cascade >= 4">
            <el-form-item prop="fourHeader">
              <el-input class="level-input" v-model.trim="model.fourHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip4')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="fourOption.length === 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="fourOption" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" :class="{active: index === fourIndex  && model.name !== '', noName: index === fourIndex && model.name === '', isdisabled: !model.checked}" v-for="(model, index) in fourOption">
                <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 4)">
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled"></el-input>
                    </div>
                    <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === fourIndex && !closeSession">
                      <el-checkbox-button v-model="model.checked" :disabled="model.isdisabled" size="mini"  @change="changeState($event, index, 4)" :label="model.checked ? $t('sms.stop'):$t('sms.reuse')"></el-checkbox-button>
                    </div>
                    <div class="icon-wapper">
                      <i class="iconfont icon-yitingyong stopIcon" v-show="index !== fourIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== fourIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== fourIndex && model.name !== ''"></i>
                      <!-- <p class="iconFontDel 126" @click.stop="delChild(index, 4)" v-show="!model.isdisabled">{{$t('public.delete')}}</p> -->
                      <el-popover
                        placement="top"
                        width="160"
                        ref="popover"
                        v-show="!model.isdisabled">
                        <p>{{$t('customer.deleteCustomerMessageOne')}}</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="allClose">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click.stop="delChild(index, 4)">{{$t('public.confirm')}}</el-button>
                        </div>
                        <p slot="reference" class="iconFontDel 123" >{{$t('public.delete')}}</p>
                      </el-popover>
                      <p class="iconFontDel" v-show="model.isdisabled">{{$t('public.delete')}}</p>
                    </div>
                  </div>
                </div>
              </li>
              </draggable>
              <li class="add" @click="addChild(4)"><el-button class="addItem" icon="el-icon-plus" type="text">{{labelView.addItem}}</el-button></li>
            </div>
          </ul>
          <ul class="next" v-if="formData.cascade >= 5" style="margin-right:0">
            <el-form-item prop="fiveHeader">
              <el-input class="level-input" v-model.trim="model.fiveHeader" :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.dicTip5')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="fiveOption.length === 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="fiveOption" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" :class="{active: index === fiveIndex  && model.name !== '', noName: index === fiveIndex && model.name === '', isdisabled: !model.checked}" v-for="(model, index) in fiveOption">
                  <div v-if="model.name!=='root'" class="bold" @click.stop="toggle($event, index, 5)">
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="model.name" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled"></el-input>
                    </div>
                    <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === fiveIndex && !closeSession">
                      <el-checkbox-button v-model="model.checked" :disabled="model.isdisabled" size="mini" @change="changeState($event, index, 5)" :label="model.checked ? $t('sms.stop'):$t('sms.reuse')"></el-checkbox-button>
                    </div>
                    <div class="icon-wapper">
                      <i class="iconfont icon-yitingyong stopIcon" v-show="index !== fiveIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== fiveIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== fiveIndex && model.name !== ''"></i>
                      <!-- <p class="iconFontDel 127" @click.stop="delChild(index, 5)" v-show="!model.isdisabled">{{$t('public.delete')}}</p> -->
                      <el-popover
                        placement="top"
                        width="160"
                        ref="popover"
                        v-show="!model.isdisabled">
                        <p>{{$t('customer.deleteCustomerMessageOne')}}</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="allClose">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click.stop="delChild(index, 5)">{{$t('public.confirm')}}</el-button>
                        </div>
                        <p slot="reference" class="iconFontDel 123" >{{$t('public.delete')}}</p>
                      </el-popover>
                      <p class="iconFontDel" v-show="model.isdisabled">{{$t('public.delete')}}</p>
                    </div>
                  </div>
                </div>
                </li>
              </draggable>
              <li class="add" @click="addChild(5)"><el-button class="addItem" icon="el-icon-plus" type="text">{{labelView.addItem}}</el-button></li>
            </div>
          </ul>
           <ul class="next" v-if="model.name === $t('qualityCheck.satisfactionSurveyOptions') && supportLevel2" >
            <el-form-item prop="fiveHeader1">
              <el-input class="level-input"  :disabled="isPleased" :placeholder="$t('configLazyLoad.dicConfig.grade2Sat')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="!currentSatisfactionChildList || currentSatisfactionChildList.length === 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="currentSatisfactionChildList || []" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" v-if = 'firstOption[firstIndex].children' :class="{active: index === currentSatisfactionChildrenIndex  && model.displayName !== '', noName: index === currentSatisfactionChildrenIndex && model.displayName === '', isdisabled: !model.checked}" v-for="(model, index) in currentSatisfactionChildList">
                  <div v-if="model.name!=='root'" class="bold" @click.stop="setCurrentSatisfactionChildren(index)">
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="model.displayName" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled"></el-input>
                    </div>
                    <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === currentSatisfactionChildrenIndex">
                      <!-- <el-checkbox-button v-model="model.checked" :disabled="model.isdisabled" size="mini" @change="changeState($event, index, 5)" :label="model.checked ? '停用':'启用'"></el-checkbox-button> -->
                    </div>
                    <div class="icon-wapper">
                      <!-- <i class="iconfont icon-yitingyong stopIcon" v-show="index !== currentSatisfactionChildrenIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== currentSatisfactionChildrenIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== currentSatisfactionChildrenIndex && model.name !== ''"></i> -->
                      <!-- <p class="iconFontDel 128" @click.stop="delSatisfactionChildren(index)" v-show="!model.isdisabled">{{$t('public.delete')}}</p> -->
                      <el-popover
                        placement="top"
                        width="160"
                        ref="popover"
                        v-show="!model.isdisabled">
                        <p>{{$t('customer.deleteCustomerMessageOne')}}</p>
                        <div style="text-align: right; margin: 0">
                          <el-button size="mini" type="text" @click="allClose">{{$t('public.cancel')}}</el-button>
                          <el-button type="primary" size="mini" @click.stop="delSatisfactionChildren(index)">{{$t('public.confirm')}}</el-button>
                        </div>
                        <p slot="reference" class="iconFontDel 2333" >{{$t('public.delete')}}</p>
                      </el-popover>
                      <!-- <p class="iconFontDel" v-show="model.isdisabled">删除</p> -->
                    </div>
                  </div>
                </div>
                </li>
              </draggable>
              <li class="add" @click="addSatisfactionChildren"><el-button class="addItem" icon="el-icon-plus" type="text">{{labelView.addItem}}</el-button></li>
            </div>
          </ul>
          <ul class="next" v-if="model.name === $t('qualityCheck.satisfactionSurveyOptions') && supportLevel2" >
            <el-form-item prop="fiveHeader2">
              <el-input class="level-input"  :disabled="isPleased" :placeholder="$t('config.channel.satisfactionVal')" maxlength="12"></el-input>
            </el-form-item>
            <div class="li-wapper">
              <div v-show="!currentSatisfactionChildList || currentSatisfactionChildList.length <= 0" class="noData">{{$t('public.noData')}}</div>
              <draggable :list="currentSatisfactionChildList" :options="{handle:'.draggable_handle'}" @start="drag=true" class="moveBox">
                <li class="item" :class="{active: currentSatisfactionChildrenName !== '', noName: currentSatisfactionChildrenName === '', isdisabled: !model.checked}" v-if="currentSatisfactionChildList.length > 0">
                  <div v-if="model.name!=='root'" class="bold" >
                  <div class="option-wapper">
                    <i class="iconfont icon-shunxutuozhuai draggable_handle"></i>
                    <div class="input-wapper">
                      <el-input class="no-border" v-model.trim="currentSatisfactionChildrenName" :placeholder="$t('public.pleaseInput')" :disabled="model.isdisabled" @change='oninput'></el-input>
                    </div>
                    <!-- <div class="other-wapper iconFontDel" v-show="model.name !== '' && index === currentSatisfactionChildrenIndex">
                      <el-checkbox-button v-model="model.checked" :disabled="model.isdisabled" size="mini" @change="changeState($event, index, 5)" :label="model.checked ? '停用':'启用'"></el-checkbox-button>
                    </div> -->
                    <div class="icon-wapper">
                      <!-- <i class="iconfont icon-yitingyong stopIcon" v-show="index !== currentSatisfactionChildrenIndex && !model.checked"></i>
                      <i class="el-icon-warning waringIcon" v-show="index !== currentSatisfactionChildrenIndex && model.name === ''"></i>
                      <i class="el-icon-caret-right arrow_right" v-show="index !== currentSatisfactionChildrenIndex && model.name !== ''"></i> -->
                      <!-- <p class="iconFontDel" @click.stop="delSatisfactionChildren(index)" v-show="!model.isdisabled">删除</p> -->
                      <!-- <p class="iconFontDel" v-show="model.isdisabled">删除</p> -->
                    </div>
                  </div>
                </div>
                </li>
              </draggable>
              <!-- <li class="add" @click="addSatisfactionChildren"><el-button class="addItem" icon="el-icon-plus" type="text">新增字典项</el-button></li> -->
            </div>
          </ul>
      </el-form>
    </div>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  import Vue from 'vue'
  import * as uuid from 'uuid'
  import { deepClone, deleteDisabledOption } from '@/utils/m7Utils'
  export default {
    name: 'dicAdd',
    data () {
      return {
        submitDisabled: false,
        rulesOne: {
          name: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        },
        rules: {
          firstHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          secoundHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          thirdHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          fourHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ],
          fiveHeader: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'}
          ]
        },
        firstOption: [],
        secoundOption: [],
        thirdOption: [],
        fourOption: [],
        fiveOption: [],
        visible:false,
        currentSatisfactionObj: {},
        twoSatisfactionChildren: [],
        currentSatisfactionChildren: {},
        currentSatisfactionChildrenIndex: 0,
        currentSatisfactionChildrenName: '',
        firstIndex: 0,
        secoundIndex: 0,
        thirdIndex: 0,
        fourIndex: 0,
        fiveIndex: 0,
        cascade: 0, // 当前的层级
        isPleased: false, // 满意度调查
        noRepeat: true, // 是否有重复项
        dicName: ['first', 'secound', 'third', 'four', 'five'],
        popshow: Array(5).fill(false) ,
        time: 1000
      }
    },
    props: {
      editOrAddForm: Object,
      isNewDic: Boolean,
      newModel: Object,
      closeSession: Boolean,
      labelView: {type: Object, default: function () {
        return {
          level: this.$t('configLazyLoad.dicConfig.cascadeRe'),
          content: this.$t('configLazyLoad.dicConfig.dicItemConfig'),
          addItem: this.$t('configLazyLoad.dicConfig.addDicItem'),
          name: '1'
        }
      }}
    },
    components: {
      draggable
    },
    computed: {
      formData () {
        return this.editOrAddForm || {}
      },
      model () {
        let model = this.newModel || {}
        model.popshow = []
        console.log(model,1213123123)
        return model
      },
      currentSatisfactionChildList () {
        return this.firstOption[this.firstIndex] && this.firstOption[this.firstIndex].children || []
      },
      supportLevel2 () {
        return this.$store.state.cti.globalLet.ass_new_features
      }
    },
    methods: {
      cancel () {
        this.$emit('refresh')
      },
      radioChange () {
        this.model.cascade = this.formData.cascade
        this.changeOption()
      },
      onSave() {
        let data = ''
        let self = this
        self.$refs.ruleForm.validate((valid) => {
            if (valid && self.noRepeat) {
              if (self.formData.name) {
                let dicArr = []
                let errorCount = 0  // 未填写的个数
                this.noRepeat = true
                this.model.options = filterOptions(this.model.options, dicArr, this, this.formData.cascade, 1)
                dicArr.forEach((item) => {
                  if (!item) {
                    errorCount++
                    return
                  }
                })
                if (!errorCount) {
                  this.model.name = this.formData.name
                  this.model.cascade = this.formData.cascade.toString()

                  self.model.headers[0] = self.model.firstHeader || ''
                  if (self.model.secoundHeader && self.formData.cascade > 1) {
                    self.model.headers[1] = self.model.secoundHeader || ''
                  }
                  if (self.model.thirdHeader && self.formData.cascade > 2) {
                    self.model.headers[2] = self.model.thirdHeader || ''
                  }
                  if (self.model.fourHeader && self.formData.cascade > 3) {
                    self.model.headers[3] = self.model.fourHeader || ''
                  }
                  if (self.model.fiveHeader && self.formData.cascade > 4) {
                    self.model.headers[4] = self.model.fiveHeader || ''
                  }
                  let model = deepClone(self.model)
                  let flag = deleteOptionParm(model.options, 1, this.formData.cascade, self, 1)
                  if (flag) {
                    delete model.firstHeader
                    delete model.secoundHeader
                    delete model.thirdHeader
                    delete model.fourHeader
                    delete model.fiveHeader
                    data = model
                  } else {
                    this.$message.error(this.$t('configLazyLoad.dicConfig.dicError1'))
                  }
                } else {
                  this.$message.error(this.$t('configLazyLoad.dicConfig.dicError2', {errorCount: errorCount}))
                }
              } 
            }
          })
          return data
      },
      onSubmit () {
        let isexistence = false
        this.submitDisabled = true
        let self = this
        this.$store.dispatch('getCache', {type: 'options'}).then((response) => {
          response.forEach((item) => {
            if (item._id === self.formData._id) {
              return true
            }
            if (item.name === self.formData.name) {
              isexistence = true
            }
          })
          if (isexistence) {
            self.$message.error(this.$t('configLazyLoad.dicConfig.dicError3'))
            self.submitDisabled = false
            return
          }
          if (!self.isPleased && self.formData.name === this.$t('qualityCheck.satisfactionSurveyOptions')) {
            self.$message.error(this.$t('configLazyLoad.dicConfig.dicError4'))
            self.submitDisabled = false
            return
          }
          let dicArr = []
          let errorCount = 0  // 未填写的个数
          this.noRepeat = true
          this.model.options = filterOptions(this.model.options, dicArr, this, this.formData.cascade, 1)
          dicArr.forEach((item) => {
            if (!item) {
              errorCount++
              return
            }
          })
          self.$refs.ruleForm.validate((valid) => {
            if (valid && self.noRepeat) {
              if (self.formData.name) {
                if (!errorCount) {
                  let action = ''
                  if (!self.isNewDic) {
                    action = 'updateDic'
                  } else {
                    delete self.formData._id
                    action = 'addDic'
                  }
                  this.model.name = this.formData.name
                  this.model.cascade = this.formData.cascade.toString()
                  if (self.model.name !== this.$t('qualityCheck.satisfactionSurveyOptions')) {
                    self.model.headers = self.model.headers.splice(self.formData.cascade - 1, 1)
                  }
                  if (self.model && self.model.name === this.$t('qualityCheck.satisfactionSurveyOptions')) {
                    self.model.headers[0] = self.model.firstHeader || ''
                    if (self.model.secoundHeader) {
                      self.model.headers[1] = self.model.secoundHeader || ''
                    }
                    let NumRegex = new RegExp('^[0-9]{1}$')
                    for (var len = dicArr.length, i = len / 2; i < len; i++) {
                      for (var j = i + 1; j < len; j++) {
                        if (dicArr[i] === dicArr[j]) {
                          this.$message.error(this.$t('configLazyLoad.dicConfig.dicError5'))
                          return
                        }
                        if (!NumRegex.test(dicArr[i]) || !NumRegex.test(dicArr[j])) {
                          this.$message.error(this.$t('config.channel.satisfactionValRange'))
                          return
                        }
                      }
                    }
                    let secondVerity = this.VerifyDupOrNull(this.firstOption)
                    if (secondVerity) {
                      if (secondVerity === 'null') {
                        this.$message.error(this.$t('configLazyLoad.dicConfig.dicError6'))
                        return
                      } else if (secondVerity === 'reapt') {
                        this.$message.error(this.$t('configLazyLoad.dicConfig.dicError7'))
                        return
                      } else if (secondVerity === 'regexError') {
                        this.$message.error(this.$t('config.channel.satisfactionValRange'))
                        return
                      }
                    }
                    let flag = deleteOptionParm(self.model.options, 1, self.formData.cascade, self, 1)
                    let newData = deepClone(self.model)
                    deleteDisabledOption(newData)
                    if (flag) {
                      this.$store.dispatch(action, self.model).then(res => {
                        if (res.success) {
                          self.submitDisabled = false
                          if (self.isNewDic) {
                            deleteDisabledOption(res.data)
                            self.$store.dispatch('addCache', {type: 'options', data: res.data})
                          } else {
                            self.$store.dispatch('updateCache', {type: 'options', id: self.formData._id, data: newData})
                          }
                          self.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                          this.$emit('refresh')
                        }
                      })
                    } else {
                      this.$message.error(this.$t('configLazyLoad.dicConfig.dicError8'))
                    }
                  } else {
                    self.model.headers[0] = self.model.firstHeader || ''
                    if (self.model.secoundHeader && self.formData.cascade > 1) {
                      self.model.headers[1] = self.model.secoundHeader || ''
                    }
                    if (self.model.thirdHeader && self.formData.cascade > 2) {
                      self.model.headers[2] = self.model.thirdHeader || ''
                    }
                    if (self.model.fourHeader && self.formData.cascade > 3) {
                      self.model.headers[3] = self.model.fourHeader || ''
                    }
                    if (self.model.fiveHeader && self.formData.cascade > 4) {
                      self.model.headers[4] = self.model.fiveHeader || ''
                    }
                    let flag = deleteOptionParm(self.model.options, 1, this.formData.cascade, self, 1)
                    let newData = deepClone(self.model)
                    deleteDisabledOption(newData)
                    if (flag) {
                      delete self.model.firstHeader
                      delete self.model.secoundHeader
                      delete self.model.thirdHeader
                      self.$store.dispatch(action, self.model).then(res => {
                        if (res.success) {
                          self.submitDisabled = false
                          if (self.isNewDic) {
                            deleteDisabledOption(res.data)
                            self.$store.dispatch('addCache', {type: 'options', data: res.data})
                            self.$message.success(this.$t('configLazyLoad.qualityCheck.addSuccess'))
                            self.$emit('refresh')
                          } else {
                            self.$store.dispatch('updateCache', {type: 'options', id: self.formData._id, data: newData})
                            self.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                            self.$emit('refresh')
                          }
                        }
                      })
                    } else {
                      this.$message.error(this.$t('configLazyLoad.dicConfig.dicError8'))
                    }
                  }
                } else {
                  this.$message.error(this.$t('configLazyLoad.dicConfig.dicError2', {errorCount: errorCount}))
                }
              } else {
                self.$message.error(this.$t('configLazyLoad.dicConfig.dicError9'))
              }
            } else {
              return false
            }
          })
        })
      },
      allClose(){
        this.$refs.popover.forEach(item=>{
          item.doClose()
        })
      },
      toggle (event, index, level, model) {
        // 确定删除吗
        if(event.target.innerHTML !== this.$t('public.delete')){
            this.allClose()
        }
        // this.model.popshow[0] = true
        if (level === 1 && this.model.name === this.$t('qualityCheck.satisfactionSurveyOptions')) {
          this.handleTwoSatisfaction(index)
        }
        this[this.dicName[level - 1] + 'Index'] = index
        this.dicName.forEach((item, num) => {
          if (num > level - 1) {
            this[item + 'Index'] = 0
          }
        })
        this.changeOption()
      },
      handleTwoSatisfaction (index) {
        this.firstIndex = index
        this.currentSatisfactionChildrenIndex = 0
        if (!this.firstOption[this.firstIndex].children || this.firstOption[this.firstIndex].children.length === 0) {
          // this.$set(this.firstOption[this.firstIndex], 'children', [{'name': '', 'key': uuid.v1(), 'state': '', 'displayName': ''}])
          // this.setCurrentSatisfactionChildren(0)
          return
        } else {
          this.currentSatisfactionChildrenName = this.firstOption[this.firstIndex].children[this.currentSatisfactionChildrenIndex].name
        }
      },
      delSatisfactionChildren (index) {
        this.firstOption[this.firstIndex].children.splice(index, 1)
        this.setCurrentSatisfactionChildren(0)
        this.allClose()
      },
      addSatisfactionChildren () {
        if (!this.firstOption[this.firstIndex].children) {
          this.$set(this.firstOption[this.firstIndex], 'children', [])
        }
        this.currentSatisfactionChildrenName = ''
        if (this.firstOption[this.firstIndex].children.length <= 9) {
          this.firstOption[this.firstIndex].children.push({'name': '', 'key': uuid.v1(), 'state': '', 'displayName': ''})
        } else {
          this.$message.error(this.$t('configLazyLoad.dicConfig.dicError10'))
        }
      },
      setCurrentSatisfactionChildren (index) {
        try {
          this.currentSatisfactionChildrenIndex = index
          this.currentSatisfactionChildrenName = this.firstOption[this.firstIndex].children[index].name
        } catch (error) {
          
        }
      },
      oninput (val) {
        // let NumRegex = new RegExp('^[0-9]{1}$')
        let newVal = val
        // let flag = false
        // if (this.firstOption[this.firstIndex].children) {
        //   this.firstOption[this.firstIndex].children.forEach((item, index) => {
        //     if (index !== this.currentSatisfactionChildrenIndex) {
        //       if (item.name === newVal) {
        //         flag = true
        //       }
        //     }
        //   })
        // }
        // if (flag) {
        //   this.$message.error('二级满意度选项有重复值！')
        //   this.currentSatisfactionChildrenName = ''
        //   return
        // }
        // if (!NumRegex.test(newVal)) {
        //   this.$message.error(this.$t('config.channel.satisfactionValRange'))
        //   this.currentSatisfactionChildrenName = ''
        //   return
        // } else {
        this.currentSatisfactionChildrenName = newVal
        this.firstOption[this.firstIndex].children[this.currentSatisfactionChildrenIndex].name = newVal
        // }
      },
      showChecked (status) {
        return status === '2'
      },
      delChild (index, level) {
        if (this.isPleased) {
          if (this.firstOption.length === 1) {
            this.$message.error(this.$t('configLazyLoad.dicConfig.dicError11'))
            return
          }
        }
        if (level === 1) {
          this.firstOption.splice(index, 1)
          this.firstIndex = 0
        } else if (level === 2 && this.firstOption.length) {
          this.secoundOption.splice(index, 1)
          this.secoundIndex = 0
        } else if (level === 3 && this.secoundOption.length) {
          this.thirdOption.splice(index, 1)
          this.thirdIndex = 0
        } else if (level === 4 && this.thirdOption.length) {
          this.fourOption.splice(index, 1)
          this.fourIndex = 0
        } else if (level === 5 && this.fourOption.length) {
          this.fiveOption.splice(index, 1)
          this.fiveIndex = 0
        }
        this.changeOption()
        this.setCurrentSatisfactionChildren(0)
        this.allClose()
      },
      addChild (level) { // 添加字典项
        let temp = {
          name: '',
          key: uuid.v1(),
          state: '2',
          options: [],
          checked: true
        }
        let cascade = parseInt(this.model.cascade) - 1
        if (level === 1) {
          if (this.isPleased && this.firstOption.length >= 10) {
            this.$message.error(this.$t('configLazyLoad.dicConfig.dicError12'))
            return
          } else {
            this.firstOption.push(temp)
            pushOption(this.firstOption[this.firstOption.length - 1].options, cascade, false)
          }
        } else if (level === 2 && this.firstOption.length) {
          let isdisabled = !this.firstOption[this.firstIndex].checked
          temp.isdisabled = isdisabled
          this.secoundOption.push(temp)
          cascade = cascade - 1
          pushOption(this.secoundOption[this.secoundOption.length - 1].options, cascade, isdisabled)
        } else if (level === 3 && this.secoundOption.length) {
          let isdisabled = !(this.secoundOption[this.secoundIndex].checked && this.firstOption[this.firstIndex].checked)
          temp.isdisabled = isdisabled
          this.thirdOption.push(temp)
          cascade = cascade - 2
          pushOption(this.thirdOption[this.thirdOption.length - 1].options, cascade, isdisabled)
        } else if (level === 4 && this.thirdOption.length) {
          let isdisabled = !(this.thirdOption[this.thirdIndex].checked && this.secoundOption[this.secoundIndex].checked && this.firstOption[this.firstIndex].checked)
          temp.isdisabled = isdisabled
          this.fourOption.push(temp)
          cascade = cascade - 3
          pushOption(this.fourOption[this.fourOption.length - 1].options, cascade, isdisabled)
        } else if (level === 5 && this.fourOption.length) {
          let isdisabled = !(this.fourOption[this.fourIndex].checked && this.thirdOption[this.thirdIndex].checked && this.secoundOption[this.secoundIndex].checked && this.firstOption[this.firstIndex].checked)
          temp.isdisabled = isdisabled
          this.fiveOption.push(temp)
        }
        this.changeOption()
      },
      changeState (checked, index, level) { 
        // 点击启用或禁用option
        let status = checked ? '2' : '1'
        if (level === 1) {
          Vue.set(this.firstOption[index], 'state', status)
          Vue.set(this.firstOption[index], 'checked', checked)
          forbiddenOption(this.firstOption[index].options, checked)
        } else if (level === 2 && this.firstOption.length) {
          Vue.set(this.secoundOption[index], 'state', status)
          Vue.set(this.secoundOption[index], 'checked', checked)
          forbiddenOption(this.secoundOption[index].options, checked)
        } else if (level === 3 && this.secoundOption.length) {
          Vue.set(this.thirdOption[index], 'state', status)
          Vue.set(this.thirdOption[index], 'checked', checked)
          forbiddenOption(this.thirdOption[index].options, checked)
        } else if (level === 4 && this.thirdOption.length) {
          Vue.set(this.fourOption[index], 'state', status)
          Vue.set(this.fourOption[index], 'checked', checked)
          forbiddenOption(this.fourOption[index].options, checked)
        } else if (level === 5 && this.fourOption.length) {
          Vue.set(this.fiveOption[index], 'state', status)
          Vue.set(this.fiveOption[index], 'checked', checked)
          forbiddenOption(this.fiveOption[index].options, checked)
        }
        this.changeOption()
      },
      changeOptionItem (n, options) {
        let num = this.dicName[n - 1]
        this[num + 'Option'] = options || []
        let current = options[this[num + 'Index']]
        let nextOptions = []
        if (current) {
          nextOptions = current.options || []
        }
        if (n < this.formData.cascade) {
          n++
          this.changeOptionItem(n, nextOptions)
        }
      },
      changeOption () {
        this.firstOption = []
        this.secoundOption = []
        this.thirdOption = []
        this.fourOption = []
        this.fiveOption = []
        if (this.model.options) {
          this.changeOptionItem(1, this.model.options)
        }
      },
      fetchData () {
        this.isPleased = this.model.name === this.$t('qualityCheck.satisfactionSurveyOptions') // 是否是满意度调查
        this.firstIndex = 0
        this.secoundIndex = 0
        this.thirdIndex = 0
        this.model.cascade = Number(this.model.cascade)
        if (!this.model.headers) {
          Vue.set(this.model, 'headers', [])
        }
        Vue.set(this.model, 'firstHeader', this.model.headers[0])
        Vue.set(this.model, 'secoundHeader', this.model.headers[1])
        Vue.set(this.model, 'thirdHeader', this.model.headers[2])
        Vue.set(this.model, 'fourHeader', this.model.headers[3])
        Vue.set(this.model, 'fiveHeader', this.model.headers[4])
        let cascade = parseInt(this.model.cascade)
        this.cascade = cascade
        if (typeof this.model.options === 'undefined') {
          Vue.set(this.model, 'options', [])
          pushOption(this.model.options, cascade, false)
          this.secoundOption = []
          this.thirdOption = []
          this.fourOption = []
          this.fiveOption = []
        }
        Vue.set(this.model, 'options', filterState(this.model.options, cascade - 1))
        this.model.options.forEach((item) => {
          if (!item.options) {
            Vue.set(item, 'options', [])
          }
          let addOptionToArr = true // 处理字典层级切换后 没有option这个字段的问题
          forbiddenOption(item.options, item.checked, addOptionToArr)
        })
        this.changeOption()
        this.setCurrentSatisfactionChildren(0)
      },
      nameInput (val) {
        console.log(val)
      },
      VerifyDupOrNull (options) {
        let type = ''
        let NumRegex = new RegExp('^[0-9]{1}$')
        options.forEach((item, index) => {
          if (item.children) {
            let newChildren = false
            let reaptJson = {}
            item.children.forEach((itemC, indexC) => {
              if (itemC.name) {
                if (!NumRegex.test(itemC.name)) {
                  if (!type) {
                    type = 'regexError'
                  }
                }
                if (!newChildren) {
                  reaptJson[itemC.name] = true
                  newChildren = true
                } else {
                  if (reaptJson[itemC.name]) {
                    if (!type) {
                      type = 'reapt'
                    }
                  } else {
                    reaptJson[itemC.name] = true
                  }
                }
              } else {
                if (!type) {
                  type = 'null'
                }
              }
            })
          }
        })
        return type
      }
    },
    watch: {
      model () {
        this.fetchData()
      }
    },
    beforeMount () {
      this.fetchData()
    }
  }
  function forbiddenOption (modelOptions, status, addOptionToArr) { //  禁用option的下级
    if (modelOptions) {
      modelOptions.forEach((item) => {
        if (!status) {
          Vue.set(item, 'isdisabled', true)
        } else {
          Vue.set(item, 'isdisabled', false)
        }
        let newStatus = status && item.checked
        if (!item.options && addOptionToArr) {
          Vue.set(item, 'options', [])
        }
        forbiddenOption(item.options, newStatus, addOptionToArr)
      })
    }
  }

  function pushOption (modelOptions, cascade, isdisabled) { //  循环插入新的字典项
    if (cascade) {
      let temp = {
        name: '',
        key: uuid.v1(),
        state: '2',
        options: [],
        isdisabled: isdisabled,
        checked: true
      }
      modelOptions.push(temp)
      pushOption(modelOptions[0].options, cascade - 1, isdisabled)
    }
  }

  function filterState (arrOption, cascade) { //  处理字典项的选中状态
    if (arrOption && arrOption.length) {
      arrOption.forEach((item) => {
        if (item.state === '2') {
          Vue.set(item, 'checked', true)
        } else {
          Vue.set(item, 'checked', false)
        }
        if (item.options && item.options.length) {
          filterState(item.options, cascade - 1)
        } else if ((typeof item.options === 'undefined' || !item.options.length) && cascade) {
//          Vue.set(item, 'options', [])
//          let temp = {
//            name: '',
//            key: uuid.v1(),
//            state: '2',
//            options: [],
//            isdisabled: false,
//            checked: true
//          }
//          item.options.push(temp)
        }
      })
    }
    return arrOption
  }

  function deleteOptionParm (arrOption, count, cascade, self, delCount) { //  删除不需要上传的参数/ 检查第一级是否有未选中项
    let flag = true
    if (arrOption && arrOption.length) {
      if (count === 1) {
        let arr = []
        arrOption.forEach((item) => {
          arr.push(item.checked)
        })
        flag = arr.filter((item) => item === true)[0]
      }
      delCount++
      if (flag) {
        arrOption.forEach((item, index) => {
          delete item.checked
          delete item.isdisabled
          if (item.options && item.options.length) {
            if (!self.isPleased && delCount > cascade) {
              delete item.options
            }
            count++
            deleteOptionParm(item.options, count, cascade, self, delCount)
          }
        })
      }
    }
    return flag
  }

  function filterOptions (arrOption, dicArr, self, cascade, count) { //  查看字典项是否为空
    if (arrOption && arrOption.length) {
      let newArr = []
      arrOption.forEach((item) => {
        newArr.push(item.name)
        dicArr.push(item.name)
      })
      unArray(newArr, self)
      arrOption.forEach((item, index) => {
        if (item.options && item.options.length) {
          if (self.isPleased) {
            filterOptions(item.options, dicArr, self, cascade)
          } else {
            if (count <= cascade) {
              count++
              filterOptions(item.options, dicArr, self, cascade, count)
            }
          }
        }
      })
    }
    return arrOption
  }

  function unArray (Arr, self) { // 数组去重
    let newArr = []
    for (let i = 0; i < Arr.length; i++) {
      if (Arr[i]) {
        if (newArr.indexOf(Arr[i]) === -1) { // 检测newArr数组里是否包含Arr数组的内容，==-1检索的字符串没有出现则为-1
          newArr.push(Arr[i]) // 把Arr数组的第i项插入新数组
        } else {
          self.noRepeat = false
          self.$message.error(self.$t('configLazyLoad.dicConfig.dicError13', {item: Arr[i]}))
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .edit
    padding 20px
  .editHead .el-form-item__content .el-input
    width 50%
    .cancel
      margin-right 20px
  .dic_config_warp
    padding-top 10px
    .el-form
      overflow hidden
    .cancel
      margin-right 20px
    .btn_warp
      height 30px
      margin 20px 0
    .isPleaseTips
      color $c-prompt
      height 30px
      line-height 30px
  .item
    cursor pointer
  .next
    padding-left 0em
    line-height 1.5em
    list-style dot
    float left
    margin-right 14px
    width 170px
    .li-wapper
      border 1px solid #DCDFE6
      margin-top 8px
      width 170px
      position relative
  .next
    &:first-child
      display block
  #dic-level-root li > ul
    display none
  #dic-level-root>li.item>ul
    left 0
    display block
  #dic-level-root li.active >ul,
  #dic-level-root li ul li
    display block
  #dic-level-root li > .bold > .option-wapper
    .icon-wapper
      width 52px
      text-align right
      color #000000
      .el-icon-arrow-right
        color #ffffff
      .iconFontDel
        display none
      .arrow_right
        display inline
    .other-wapper
      display: none
  #dic-level-root li.noName > .bold > .option-wapper
    color #fff
    .icon-wapper
      color #fff
      .iconFontDel
        display inline
      .arrow_right
        display none
    .other-wapper
      display: inline
      color #ffffff
  #dic-level-root li.isdisabled  > .bold > .option-wapper
    color #878787
    .icon-wapper
      color #DCDFE6
    .iconFontDel
      display none
    .arrow_right
      display inline
    .other-wapper
      display: none
      color #ffffff
    .draggable_handle
      color #878787
  .option-wapper
    display flex
    align-items center
    padding-right 5px
  .input-wapper:hover
    cursor pointer
  .add
    border-top 1px solid #DCDFE6
    background #FAFAFA
    text-align center
    position: relative
    width: 100%
  .active
    background $c-main
  .non-fatal-wapper
    color $cf-level3
    margin-top 16px
  .non-fatal
    width 56px
  #dic-level-root li.active > .bold > .option-wapper
    background $c-main
    color #fff
    .icon-wapper
      width 52px
      .el-icon-arrow-right
        color #fff
      .iconFontDel
        color #fff
        display inline
      .arrow_right
        display none
    .other-wapper
      display: inline
  .draggable_handle
    display inline-block
    cursor move
  .no-border>input
    background: #459ae9
    color: #fff
  .no-border>input:hover
    color #595959
  .waringIcon
    color: #FF9910
  .stopIcon
    color #FF6B6B
    font-size 12px
    margin-right 5px
  .moveBox
    height:280px
    overflow-y auto
  .noData
    position: absolute
    color: rgb(135, 135, 135)
    left: 50%
    top: 50%
    margin-left: -24px
    margin-top: -9px
</style>
<style lang="stylus">
  #dic-level-root
    .noName
       background #FF6B6B
    .noName > .bold > .option-wapper
      .input-wapper .el-input .el-input__inner
        border-radius 0
        background #FF6B6B
        color #fff
    .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner
      background-color transparent
      border none
      padding 10px
      font-size 12px
    .el-checkbox-button:last-child .el-checkbox-button__inner
      background-color transparent
      border none
      padding 10px
      font-size 12px
    .el-checkbox-button__inner
      color: #fff
    .el-checkbox-button__inner:hover
      color: #fff
    .el-input.is-disabled .el-input__inner
      background-color #fff
    li.isdisabled  > .bold > .el-input__inner
      color: #878787
    .el-input__inner:-ms-input-placeholder:hover
      color #000
</style>
